<template>
  <div class="welcome-container">
    <div class="welcome-header">
      <h1>欢迎使用奖学金评定系统</h1>
      <p class="subtitle">高效、公正的奖学金评定平台</p>
    </div>
    
    <div class="welcome-content">
      <div class="feature-cards">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="8">
            <el-card shadow="hover" class="feature-card">
              <div class="feature-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="feature-text">
                <h3>个人管理</h3>
                <p>查看与维护个人基本信息</p>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-card shadow="hover" class="feature-card">
              <div class="feature-icon trophy">
                <i class="el-icon-trophy"></i>
              </div>
              <div class="feature-text">
                <h3>成绩评分</h3>
                <p>科研能力与思政表现评定</p>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-card shadow="hover" class="feature-card">
              <div class="feature-icon result">
                <i class="el-icon-data-analysis"></i>
              </div>
              <div class="feature-text">
                <h3>数据统计</h3>
                <p>查看奖学金评审统计信息</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <div class="dashboard-section">
        <el-row :gutter="30">
          <el-col :xs="24" :md="24">
            <el-card class="announcement-card">
              <div slot="header" class="announcement-header">
                <h3><i class="el-icon-bell"></i> 系统公告</h3>
              </div>
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :color="getTimelineColor(index)"
                  :timestamp="activity.timestamp">
                  {{activity.content}}
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      activities: [
        {
          content: '2023年度奖学金评定工作已开始，请各位同学及时提交申请',
          timestamp: '2023-09-01'
        },
        {
          content: '请各位导师完成学生思政表现评分',
          timestamp: '2023-09-05'
        },
        {
          content: '奖学金评定结果将于10月20日公布',
          timestamp: '2023-09-10'
        }
      ]
    }
  },
  methods: {
    getTimelineColor(index) {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
      return colors[index % colors.length];
    }
  }
}
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.welcome-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.welcome-header h1 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 10px;
  font-weight: 600;
}

.subtitle {
  font-size: 16px;
  color: #606266;
}

.welcome-content {
  max-width: 1200px;
  margin: 0 auto;
}

.feature-cards {
  margin-bottom: 40px;
}

.feature-card {
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
  border: none;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ecf5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.feature-icon i {
  font-size: 30px;
  color: #409EFF;
}

.feature-icon.trophy {
  background-color: #f0f9eb;
}

.feature-icon.trophy i {
  color: #67C23A;
}

.feature-icon.result {
  background-color: #fdf6ec;
}

.feature-icon.result i {
  color: #E6A23C;
}

.feature-text {
  text-align: center;
}

.feature-text h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #303133;
}

.feature-text p {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.dashboard-section {
  margin-top: 20px;
}

.announcement-card, .quick-links-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
}

.announcement-header, .quick-links-header {
  display: flex;
  align-items: center;
}

.announcement-header h3, .quick-links-header h3 {
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
}

.announcement-header i, .quick-links-header i {
  margin-right: 8px;
  font-size: 20px;
}

.quick-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.quick-link-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 15px;
  border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .welcome-header h1 {
    font-size: 24px;
  }
  
  .feature-card {
    height: 140px;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
  }
  
  .feature-icon i {
    font-size: 24px;
  }
}
</style> 